<template>
    <section>
      <el-card class="box-card">
        <el-upload
          :action="uploadUrl"
          :limit="20"
          :headers="headers"
          :on-success="over"
          :multiple="false"
          :on-exceed="exceed"
          :data="record"
          :on-remove="delFile"
          :on-progress="overProgress"
          :on-change="handleChange"
          :on-error="errorMsg"
          :before-upload="uploadFile"
          :show-file-list=false
          accept="zip"
          :file-list="fileList"
        >
        <el-button icon="el-icon-document-add"  type="primary" size="small">
          文件上传
        </el-button>
        </el-upload>
        <el-table
          style="margin: 25px 0px 80px 0px;border: 1px solid #ededed;"
          :data="TempSkinList"
          table
          stripe
          header-row-class-name="table-header"
          row-class-name="table-row-border"
          cell-class-name="table-row-cell"
          header-cell-class-name="table-header-cell"
        >
          <el-table-column
            label="图标"
            align="center"
            show-overflow-tooltip
          >
            <template>
              <i class="el-icon-folder-opened" style="font-size: 20px"></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="模板名称"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
<!--              {{scope.row.type | keyText("TemplateType")}}-->
              {{scope.row.type | tempType}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  @click="templateDel(scope.row)"
                ></el-button>

                <el-button
                  size="mini"
                  icon="el-icon-right"
                  @click="templateCont(scope.row)"
                ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </section>
</template>

<script>
  import { mapGetters } from "vuex";
  // import Status from "@/libs/status";
    export default {
      data(){
          return{
            fileName:"",
            // TemplateType:Status.TemplateType,
            uploadUrl: window.api.domain + "/api/file/upload/name",
            headers: {
              appKey: window.sessionStorage.getItem("appKey"),
              Authorization: window.sessionStorage.getItem("token"),
            },
            record: {
              type:""
            },
            fileList: [],
        }
      },
      created() {
        this.getTempSkinList();
      },
      mounted() {},
      computed: {
        ...mapGetters({
          TempSkinList: "TempSkinList",
          TempQuery: "TempQuery",
        })
      },
      filters: {
        tempType: function(value) {
          if (value =="DIR") {
            return "文件夹";
          } else {
            return "文件";
          }
        }
      },
      methods:{
        uploadFile(file){
          this.record.type = 2
        },
        //栏目模板风格
        getTempSkinList(){
          this.$store.dispatch("queryAppTemplateSkinUsingGETS").then(ret => {})
        },
        over() {
          this.getTempSkinList();
          this.$message({
            message: "上传成功！",
            type: "success"
          })
        },
        exceed() {
          //重复选择文件,弹出错误弹窗
          this.$message({
            message: "最多仅支持上传一个文件",
            type: "warning"
          });
        },
        delFile() {},
        overProgress() {},
        handleChange(file) {},
        errorMsg() {
          this.$message({
            message: "上传失败，请重新上传！",
            type: "error"
          });
        },

          //模板添加
        templateCont(row){
          this.$router.push({
            name: "tempContent",
            query:{
              skinFolderName:'templets/1/'+row.name
            }
          });
        },
        //模板删除
        templateDel(row){
          var param = {
            name:row.name,
            type:2
          }
          console.log("文件删除",param)
          this.$store.dispatch("deleteFileUsingDELETES",param).then(ter => {
            this.$message({
              message:"删除成功！",
              type:"success"
            })
            this.getTempSkinList()
          }).catch(()=>{
            this.$message({
              message:"删除失败！",
              type:"error"
            })
          })
        }
      }
    }
</script>

<style scoped>

</style>
